<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
	<meta name="viewport" content="width=device-width,initial-scale=1,user-scalable=0" />
	<title>方案列表</title>
	<meta name="format-detection" content="telephone=no" />
	<link rel="stylesheet" th:href="@{/weixin/css/weui.min.css}" />
	<link rel="stylesheet" th:href="@{/weixin/css/swiper.min.css}" />
	<link rel="stylesheet" href="/static/weixin/css/style.css" th:href="@{/weixin/css/style.css}" />
	<link rel="stylesheet" th:href="@{/weixin/css/dropload.css}" />
	<script type="text/javascript" src="../../static/weixin/js/zepto.min.js" th:src="@{/weixin/js/zepto.min.js}"></script>
	<script type="text/javascript" src="../../static/weixin/js/weui.min.js" th:src="@{/weixin/js/weui.min.js}"></script>
	<script type="text/javascript"  th:src="@{/weixin/js/dropload.min.js}"></script>
	<script type="text/javascript" src="../../static/weixin/js/adaptive.js" th:src="@{/weixin/js/adaptive.js}"></script>
	<script type="text/javascript" src="../../static/weixin/js/swiper.min.js" th:src="@{/weixin/js/swiper.min.js}"></script>
</head>
<body>
	<section class="wrapper">
		<div class="banner">
			<ul class="swiper-wrapper">
				<a th:href="@{/weixin/style/detail/{id}(id=${b.refId})}" class="swiper-slide pic" th:each="b:${banners}" th:style="'background-image:url('+@{/upload/img/{id}(id=${b.imgId})}+')'"></a>
			</ul>
			<div class="swiper-pagination"></div>
		</div>
		<div class="searchBar box-h">
			<div class="flex tc menu">
				<span class="sort">全部</span>
				<ul name="hot" style="z-index:100; top: 100px; display: none;">
					<li value="">全部</li>
					<li value="0">热门</li>
					<li  value="1">推荐</li>
				</ul>
			</div>
			<div class="flex tc menu">
				<span class="sort">全部风格</span>
				<ul name="style" style="z-index:100; top: 100px; display: none;">
					<li value="">全部风格</li>
					<li th:each="m:${styles}" th:value="${m.value}" th:text="${m.name}"></li>
				</ul>
			</div>
		</div>
		<ul class="houseList">
			
		</ul>
	</section>
	<script>
	var query = {"style":"", "hot":""};
	$(function(){
		$('.menu').click(function () {
			var $menu = $(this).find('ul'),
			height = $('.tc').height()  + 5 + 'px',
			display = $menu.css('display');

			$('.menu ul').css({
				'top': '100px',
				'display': 'none'
			});
				
			if(display == 'none') {
				$menu.css({
				'top': height,
				'display': 'block'
				});
			}else {
				$menu.css({
				'top': 100,
				'display': "none"
				});
			}
		});
		
		$('.menu li').click(function(){
			$(this).parents(".menu").find("span").html($(this).text());
			query[$(this).parent().attr("name")] = $(this).attr("value");
			reload();
		})

	});    

	</script>
	
	<script  th:inline="JavaScript">
    var styles = /*[[${styles}]]*/ null;
	//页数 
	$(function(){
		reload();
		
		var bannerswiper = new Swiper('.banner', {
			pagination: '.banner .swiper-pagination',
			paginationClickable: true,
			loop:true,
			autoplay: 2500,
			autoplayDisableOnInteraction: false
		});

	});

	/*<![CDATA[*/
var page = 0;
function reload(){
	$('.houseList').html('');
    $('.dropload-down').remove();
    
    page = 0;
    $('.wrapper').dropload(opt);
}	           
var opt = {
    scrollArea : window,
    autoLoad : true,//自动加载
    loadDownFn : function(me){
     window.history.pushState(null, document.title, window.location.href);
        $.ajax({
            type: 'GET',
            url:'/mall/weixin/style/list?page='+page,
            data: query,
            dataType: 'json',
            success: function(data){
                if(data.content.length == 0){
                    me.lock();
                    me.noData();
                    me.resetload();
                    return;
                }

		        var result = '';
                for(var i=0; i< data.content.length; i++){
                  result+=content(data.content[i]);
                }
                
                $('.houseList').append(result);
                $(".houseList .box-h").click(pick);
                page++;
                me.resetload();
            },
            error: function(xhr, type){
                alert('Ajax error!');
                me.resetload();
            }
        });
    }
};

function content(data){
	return '<li class="box-h" id="'+data.id+'">'+
	'<a class="avatar" href=""><img src="/mall/upload/img/'+data.coverPic+'"></a><div class="flex">'+
	'<p class="name">'+data.name+'</p>'+
	'<p class="tip">'+ellipsis(data.description)+'</p>'+
	'<p class="tagBox">'+
		'<span>'+dict(data.style, styles)+'</span>'+
		'<span>'+data.author+'</span>'+
	'</p>'+
	'<p class="price"><sub>￥</sub>'+data.budget+'</p>'+
	'</div></li>'
}

function dict(value, arr){
	for(var i in arr){
		if(value == arr[i]["value"])
			return arr[i]["name"];
	}
}
function pick(){
	var id = $(this).attr("id");
	weui.actionSheet([{
        label: '查看详情',
        onClick: function onClick() {
            var id = _this.attr("id");
            
        }
    },{
        label: ' 我要咨询',
        onClick: function onClick() {
            
            
        }
    }], [{
        label: '取消',
        onClick: function onClick() {
        }
    }], {
        className: "custom-classname"
    });
}

function ellipsis(text){
	return (text.length > 20)? (text.substring(0, 80) + "...") : text ;
}
/*]]>*/
</script>   
</body>
</html>